<!-- 岗位管理 -->
<template>
  <div class="container">
    <!-- 搜索区域 -->
    <div class="flex gap-2 mt-1 justify-around">
      <div>
        <span>岗位名称</span>
        <el-input v-model="searchData.name" placeholder="请输入岗位名称" style="width: 240px" />
      </div>
      <div>
        <span>状态</span>
        <el-select v-model="searchData.status" placeholder="岗位状态" style="width: 240px">
          <el-option label="正常" value="1"></el-option>
          <el-option label="停用" value="0"></el-option>
          <el-option label="所有" value="2"></el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="resetSearch">重置</el-button>
      </div>
    </div>

    <!-- 按钮区域 -->
    <div class="m-1">
      <el-button type="primary" plain @click="dialogAdd = true">新增</el-button>
      <el-button type="success" plain @click="handleEdit" :disabled="true">修改</el-button>
      <el-button type="warning" plain @click="handleDelete" :disabled="true">删除</el-button>
    </div>

    <!-- 表格区域 -->
    <div class="pl-2">
      <el-table :data="paginatedData" style="width: 100%; height: 460px; font-size: 24px;" @selection-change="handleSelection">
        <el-table-column type="selection" width="50" />
        <el-table-column prop="id" label="岗位编号" width="150" />
        <el-table-column prop="name" label="岗位名称" width="150" />
        <el-table-column prop="level" label="岗位级别" width="150" />
        <el-table-column prop="salay" label="岗位薪资" width="150" />
        <el-table-column prop="sortCode" label="岗位排序" width="150" />
        <el-table-column prop="status" label="状态" width="150">
          <template #default="{ row }">
           <el-tag v-if="row.status==0" type="success">正常</el-tag>
           <el-tag v-else type="danger">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="handleEdit(row)">修改</el-button>
            <el-button link type="danger" size="small" @click="confirmDelete(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        background
        layout="sizes, prev, pager, next"
        :total="total"
        :current-page="currentPage"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>

    <!-- 新增岗位弹窗 -->
    <el-dialog v-model="dialogAdd" title="新增岗位">
      <el-form :model="newData" label-width="120px">
        <el-form-item label="岗位名称">
          <el-input v-model="newData.name" placeholder="请输入岗位名称" />
        </el-form-item>
        <el-form-item label="岗位级别">
          <el-input type="number" v-model="newData.level" placeholder="请输入岗位级别" />
        </el-form-item>
        <el-form-item label="岗位薪资">
          <el-input type="number" v-model="newData.salay" placeholder="请输入岗位薪资" />
        </el-form-item>
        <el-form-item label="岗位排序">
          <el-input type="number" v-model="newData.sortCode" placeholder="请输入岗位排序" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="newData.status" placeholder="岗位状态">
            <el-option label="正常" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogAdd = false">取消</el-button>
        <el-button type="primary" @click="addPosition">确定</el-button>
      </template>
    </el-dialog>

      <!-- 修改岗位弹窗 -->
      <el-dialog v-model="dialogChange" title="新增岗位">
      <el-form :model="formData" label-width="120px">
        <el-form-item label="岗位名称">
          <el-input v-model="formData.name" placeholder="请输入岗位名称" />
        </el-form-item>
        <el-form-item label="岗位级别">
          <el-input type="number" v-model="formData.level" placeholder="请输入岗位级别" />
        </el-form-item>
        <el-form-item label="岗位薪资">
          <el-input type="number" v-model="formData.salay" placeholder="请输入岗位薪资" />
        </el-form-item>
        <el-form-item label="岗位排序">
          <el-input type="number" v-model="formData.sortCode" placeholder="请输入岗位排序" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formData.status" placeholder="岗位状态">
            <el-option label="正常" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogAdd = false">取消</el-button>
        <el-button type="primary" @click="saveLevel">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { levelAdd, levelList, levelDelete, levelUpdate ,levelAll,levelListDelete} from "@/api";
import { ElMessage } from 'element-plus';
const searchData = reactive({
  name: "",
  status: "",
});

const tableData = ref([]);
const selectedRows = ref([]);
const paginatedData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const dialogChange = ref(false);
const dialogAdd = ref(false);
const newData = reactive({
  id: null,
  name: "",
  level: 0,
  salay: 0,
  sortCode: 0,
  status: 1,
});
const formData = reactive({
  id: null,
  name: "",
  level: 0,
  salay: 0,
  sortCode: 0,
  status: 1,
});

// 获取岗位列表
const fetchLevelList = async () => {
  const response = await levelAll();
  tableData.value = response.data.data;
  total.value = tableData.value.length;
  console.log(tableData.value);
  
  updateTableData();
};

const addPosition=()=>{
  levelAdd(newData)
  newData.id=null
  dialogAdd.value=false
  ElMessage.success('添加成功')
  fetchLevelList()
}

const search=()=>{
  if(searchData.status==='0'){
    levelListDelete().then((res)=>{
      tableData.value=res.data.data
      total.value=tableData.value.length
      updateTableData()
    })
  }else if((searchData.status==='1')){
  //   const response = await levelAll();
  // tableData.value = response.data.data;
  // total.value = tableData.value.length;
  // console.log(tableData.value);
    levelAll().then((res)=>{
      tableData.value=res.data.data.filter((item)=>item.status===0)
      total.value=tableData.value.length
      updateTableData()
    })
  }else{
    fetchLevelList();
  }
  }
// 保存岗位
const saveLevel = async () => {
  if (formData.id) {
    console.log(formData);
    await levelUpdate(formData);
  } else {
    await levelAdd({ ...formData,id: null });
  }
  dialogChange.value = false;
  fetchLevelList();
};

// 删除岗位
const confirmDelete = async (id) => {
  await levelDelete(id);
  fetchLevelList();
};

const handleDelete = () => {
  selectedRows.value.forEach(async (row) => {
    await levelDelete(row.id);
  });
  fetchLevelList();
};

// 修改岗位
const handleEdit = (row) => {
  Object.assign(formData, row);
  dialogChange.value = true;
};

// 分页处理
const handlePageChange = (page) => {
  currentPage.value = page;
  updateTableData();
};

const handleSizeChange = (size) => {
  pageSize.value = size;
  updateTableData();
};

const updateTableData = () => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  paginatedData.value = tableData.value.slice(start, end);
};

// const getStatus(status:string)=>{
//   if(status==='0'){
//     return '正常'
//   }else if(status==='1'){
//     return '停用'
//   }
// }

// 重置搜索条件
const resetSearch = () => {
  searchData.name = "";
  searchData.status = "";
  fetchLevelList();
};

const handleSelection = (rows) => {
  selectedRows.value = rows;
};

// 初始化数据
onMounted(fetchLevelList);
</script>

<style scoped>
.container {
  padding: 16px;
}
</style>
